<template>
  <el-dialog
    title="骑手详情"
    width="60%"
    class="el-dialog-box"
    :visible.sync="dialogVisible"
  >
    <div class="edit-label-content">
      <div class="container">
        <el-row class="row">
          <el-col :span="8">姓名: {{ infoForm.name }}</el-col>
          <el-col :span="8">性别: {{ infoForm.sex == 0 ? "女" : "男" }}</el-col>
          <el-col :span="8">手机号: {{ infoForm.phone }}</el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="12">身份证号: {{ infoForm.idCard }}</el-col>
          <el-col :span="8" :offset="4"
            >备注: {{ infoForm.remark || "--" }}</el-col
          >
        </el-row>
        <el-row class="row">
          <el-col :span="8">
            <div class="passage-certificate">
              <div>通行证:</div>
              <div class="passage-certificate-pic-box">
                <el-image
                  :src="infoForm.passCardUrl"
                  class="passage-certificate-pic"
                  fit="cover"
                  :preview-src-list="[infoForm.passCardUrl]"
                >
                  <div slot="error" class="image-slot">
                    <img src="@/assets/img/def.png" />
                  </div>
                </el-image>
              </div>
            </div>
          </el-col>
          <el-col :span="14" :offset="2">
            <div>
              通行证有效期:
              <span v-if="infoForm.validFrom">
                {{ infoForm.validFrom }} ～
                {{ infoForm.validTo }}</span
              >
              <span v-else>
                --
              </span>
            </div>
          </el-col>
        </el-row>
        <el-row> <div class="table-title">上岗情况</div> </el-row>
        <el-row>
          <el-table :data="tableData" border class="table">
            <el-table-column
              prop="index"
              align="center"
              label="序号"
              type="index"
              width="160"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              align="center"
              label="状态"
              width="160"
            >
              <template slot-scope="scope">
                <div class="dot-status">
                  <div
                    :class="['dot', scope.row.status ? 'dot1' : 'dot0']"
                  ></div>
                  {{ scope.row.status === 0 ? "未到岗" : "在岗" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="date" align="center" label="时间">
            </el-table-column>
          </el-table>
        </el-row>
      </div>
    </div>
    <!-- 按键 -->
    <span slot="footer" class="dialog-footer">
      <div class="default-btn" @click="dialogVisible = false">
        {{ $t("user.calcel") }}
      </div>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        id: "",
        dialogVisible: false,
        infoForm: {},
        tableData: [],
      };
    },
    mounted() {},
    methods: {
      open(id, payload) {
        this.id = id;
        this.dialogVisible = true;
        this.getInfo();
      },
      getInfo() {
        this.$http({
          url: this.$http.adornUrl("/platform/rider/" + this.id),
          method: "get",
        }).then(({ data }) => {
          this.infoForm = data;
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .container {
    font-size: 14px;
  }
  .row {
    margin-bottom: 20px;
  }
  .passage-certificate {
    display: flex;
  }
  .passage-certificate-pic-box {
    border: 1px dotted #ccc;
    box-sizing: border-rgb(229, 229, 229);
    padding: 10px;
    margin-left: 20px;
    .passage-certificate-pic {
      max-height: 100px;
      max-width: 100px;
    }
  }

  .table-title {
    font-weight: bold;
    margin-bottom: 20px;
  }
  .table {
    width: 90%;
    margin: 0 auto;
  }

  .dot-status {
    display: flex;
    align-items: center;
    width: max-content;
    margin: 0 auto;
  }
  .dot {
    margin-right: 4px;
    height: 16px;
    width: 16px;
    border-radius: 50%;
  }

  .dot1 {
    background: #1ad037;
  }
  .dot0 {
    background: #909399;
  }
</style>
